<template>
	<view class="Withdrawal">
		<u-navbar title="提现" :border-bottom="false"></u-navbar>
		<view class="t1">￥{{ store.total_money }}</view>
		<view class="t2">可提现金额</view>
		<view class="t3">提现金额</view>
		<view class="t4">
			<view class="l">
				￥
				<input type="number" v-model="money" placeholder="至少100元才可提现" />
			</view>
			<view class="r" @click="All">全部</view>
		</view>
		<view class="t5">
			<view class="t51">
				<view class="t51_1">收款类别：</view>
				<view class="t51_I">
					<u-radio-group v-model="value">
						<u-radio shape="circle" name="银行卡">银行卡</u-radio>
						<u-radio shape="circle" name="支付宝">支付宝</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view v-if="value == '支付宝'">
				<view class="t51">
					<view class="t51_1">{{ value }}帐号：</view>
					<view class="t51_I"><input type="text" v-model="form.value1" :placeholder="'请输入' + value + '帐号'" /></view>
					<img src="../../static/set.png" alt="" class="t51_img" />
				</view>
				<view class="t51">
					<view class="t51_1">{{ value }}姓名：</view>
					<view class="t51_I"><input type="text" v-model="form.value2" :placeholder="'请输入' + value + '姓名'" /></view>
					<img src="../../static/set.png" alt="" class="t51_img" />
				</view>
			</view>
			<view v-if="value == '银行卡'">
				<view class="t51">
					<view class="t51_1">银行卡号：</view>
					<view class="t51_I"><input type="text" v-model="form.value1" placeholder="请输入银行卡号" /></view>
					<img src="../../static/set.png" alt="" class="t51_img" />
				</view>
				<view class="t51">
					<view class="t51_1">银行名称：</view>
					<view class="t51_I"><input type="text" v-model="form.value2" placeholder="请输入银行名称" /></view>
					<img src="../../static/set.png" alt="" class="t51_img" />
				</view>
				<view class="t51">
					<view class="t51_1">开户行信息：</view>
					<view class="t51_I"><input type="text" v-model="form.value3" placeholder="列：中国银行武汉光谷支行" /></view>
					<img src="../../static/set.png" alt="" class="t51_img" />
				</view>
			</view>
		</view>
		<view class="bt" @click="confirmSubmit">提交申请</view>
		<view class="t6" v-if="value == '银行卡'">
			<view>*提现须知：</view>
			<view>一、公司名称需要与开票公司一致，否则无效</view>
			<view>二、提交申请后请开具相应金额发票给予我司商务对接人员，我司将在收到发票后3~5个工作日内完成账单核验与打款。请知晓。</view>
		</view>
		<view class="t8" @click="Txrecord">
			提现/流水记录
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
import { saveTcash, nowDayCount } from '../../libs/axios.js';
import _ from 'lodash';
export default {
	data() {
		return {
			total_money: 0,
			money: '',
			form: {},
			store: {},
			value: '银行卡'
		};
	},
	methods: {
		Txrecord() {
			uni.navigateTo({
				url: '/pages/Txrecord/Txrecord'
			});
		},
		confirmSubmit: _.debounce(
			async function () {
				let option;
				if (this.value === '银行卡') {
					uni.setStorageSync('value', this.value);
					uni.setStorageSync('txaValue1', this.form.value1);
					uni.setStorageSync('txaValue2', this.form.value2);
					uni.setStorageSync('txaValue3', this.form.value3);
					option = [this.form.value1, this.form.value2, this.form.value3];
					option = option.join('+');
				} else {
					uni.setStorageSync('value', this.value);
					uni.setStorageSync('txaValue1', this.form.value1);
					uni.setStorageSync('txaValue2', this.form.value2);
					option = [this.form.value1, this.form.value2];
					option = option.join('+');
				}
				let info = await saveTcash({
					money: this.money,
					tx_info: this.value + ':' + option
				});
				let info2 = await nowDayCount();

				uni.navigateTo({
					url: '/pages/WithdrawalApply/WithdrawalApply'
				});
				this.$store.state.total_money = info2.data.total_money;
			},
			1000,
			{
				leading: true, //在延迟开始前立即调用事件
				trailing: false //在延时结束后不调用,保证事件只被触发一次
			}
		),
		All() {
			this.money = this.total_money;
		}
	},
	onLoad(option) {
		const value = uni.getStorageSync('value');
		const value1 = uni.getStorageSync('txaValue1');
		const value2 = uni.getStorageSync('txaValue2');
		const value3 = uni.getStorageSync('txaValue3');
		this.value = value;
		this.form.value1 = value1;
		this.form.value2 = value2;
		this.form.value3 = value3;
		console.log(value1, value2);
		this.total_money = Number(option.total_money);
		this.$store.state.total_money = this.total_money;
		this.store = this.$store.state;
	}
};
</script>

<style lang="scss">
.Withdrawal {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.t1 {
		font-size: 72rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 80rpx;
		text-align: center;
	}
	.t2 {
		margin-top: 14rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
	}
	.t3 {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin: 62rpx 0 0 24rpx;
	}
	.t4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 38rpx 24rpx 0 24rpx;
		.l {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			display: flex;
			align-items: center;
			input {
				margin-left: 10rpx;
			}
		}
		.r {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(247, 49, 54, 1);
		}
	}
	.t5 {
		margin: 38rpx 24rpx 0 24rpx;
		.t51 {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.t51_1 {
				width: 25%;
			}
			.t51_I {
				width: 70%;
				input {
					width: 100%;
				}
			}
			.t51_img {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 88rpx auto 0 auto;
	}
	.t6 {
		margin: 40rpx 24rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(242, 65, 69, 1);
	}
	.t8 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-top: 74rpx;
	}
}
</style>
